<template>
  <div class="cart-header">
      <div class="container">
        <div class="logo">
            <router-link to="/index"><img src="/imgs/logo-mi.png"></router-link>
            
        </div>
        <div class="slot">
            <h3 ref="title">我的购物车</h3>
            <span ref='desc'>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
        </div>
        <div class="name">{{this.$store.state.username}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'CartHeader',
    props:['type'],
    data(){
        return{
            path: ''
        }
    },
    methods: {
        setHeaderInfo(){
            if(this.type === 3){
                this.$refs.title.innerHTML = "订单支付";
                this.$refs.desc.innerHTML = '';
            }else if(this.type === 2){
                this.$refs.title.innerHTML = '订单列表';
                this.$refs.desc.innerHTML = '请谨防钓鱼链接或诈骗电话，了解更多>';
            }else if(this.type === 1){
                this.$refs.title.innerHTML = '我的购物车';
                this.$refs.desc.innerHTML = '温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算'
            }else if(this.type ===4){
                this.$refs.title.innerHTML = "确认订单";
                this.$refs.desc.innerHTML = "";
            }
        }
    },
    // mounted(){
    //     this.path = location.hash;
    //     this.setHeaderInfo()
    // },
    watch: {
        type(){
            this.setHeaderInfo()
        }
    }
}
</script>

<style lang='scss'>
.cart-header{
    height: 112px;
    border-bottom: 1px solid #ff6600;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: bold;
    color: #333333;
    line-height: 112px;
    .logo{
        float: left;
        img{
            width: 53px;
            height: 52px;
            vertical-align: middle;
        }
    }
    .name{
        float: right;
        font-size: 16px;
        font-family: PingFang SC;
        color: #666666;

    }
    .slot{
        margin-left: 54px;
        float: left;
        h3{
            font-size: 28px;
            margin-right: 14px;
            display: inline-block;
        }
        span{
            font-size: 14px;
            color: #999;
        }
    }
}
</style>